<template>
    <div class="goodsinfo-container">
       <!-- 轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
					</div>
				</div>
		</div>
       <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价:
                            <span style="margin-right:10px"><del>￥{{goodsinfo.market_price}}</del></span><!-- del标签为删除线，也就是一条横线 -->
                            销售价
                            <span style="font-size:17px;color:red;font-weight:bold">￥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>
                            购买数量:
                            <!-- 注意：这里的max是库存量 -->
                            <!-- 由于goodsinfo是通过ajax动态获取得来的，但是ajax是异步请求，需要消耗一些时间
                            因此可能会导致这样的情况：nobox组件先于ajax渲染出来此时组件被渲染的时候，goodsinfo为
                            空对象，因此传递到子组件中的stock_quantity是undefined -->
                            <nobox :max="goodsinfo.stock_quantity"></nobox>
                        </p>
                        <div>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small">加入购物车</mt-button>
                        </div>
					</div>
				</div>
		</div>
       <!-- 商品参数区域 -->
       <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsinfo.goods_no}}</p>
                        <p>库存情况:{{goodsinfo.stock_quantity}}件</p>
                        <p>上架时间:{{goodsinfo.add_time|dataFormat}}</p>
                       
					</div>
				</div>
				<div class="mui-card-footer btnarea">
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain>商品评论</mt-button>
                </div>
		</div>
    </div>
</template>

<script>
//导入自己封装的轮播图组件
import swiper from '../sub-conponents/Swiper.vue'
import nobox from'../sub-conponents/goodsinfo_nobox.vue'
export default {
    data() {
        return{
            lunbotu:[],//商品的轮播图
            goodsinfo:{},//商品的详情
        }
    },
    created(){
        this.getlunbotu();
        this.getGoodsinfoById();
    },
    methods:{
        async getlunbotu(){
            //获取轮播图的方法
            const {data} = await this.$http.get('/api/getthumimages/'+this.id)
            if(data.status === 0){
                return (this.lunbotu = data.message);
            }
        },
        async getGoodsinfoById(){
            //同过ID获取商品的参数
            const {data} = await this.$http.get('/api/goods/getinfo/'+this.id)
            if(data.status === 0){
                return(this.goodsinfo=data.message[0])
            }
        }
    },
    props:['id'],
    components:{
        swiper,
        nobox
    }
}
</script>

<style lang="scss" scoped>
        .goodsinfo-container{
            background-color: #eee;
            overflow: hidden;
            .btnarea{
                flex-direction: column;
                button+button{
                    margin-top: 15px;
                }
            }
        }
</style>